import React, { lazy, Suspense } from 'react'
import './App.less';
import { Route, Redirect, Switch } from 'react-router-dom'
import Home from './pages/Home'

// 路由访问控制组件
import AuthRoute from './components/AuthRoute'

// 使用动态组件的方式导入组件：
const CityList = lazy(() => import('./pages/CityList'));
const Map = lazy(() => import('./pages/Map'));
const HouseDetail = lazy(() => import('./pages/HouseDetail'));
const Login = lazy(() => import('./pages/Login'));
const Registe = lazy(() => import('./pages/Registe'));
const Favorites = lazy(() => import('./pages/Favorites'));
const Rent = lazy(() => import('./pages/Rent'));
const RentAdd = lazy(() => import('./pages/Rent/Add'));
const RentSearch = lazy(() => import('./pages/Rent/Search'));
const ModifyUserInfo = lazy(() => import('./pages/ModifyUserInfo'));

function App() {
  return (
    <Suspense fallback={<div className="route-loading">loading...</div>}>
      <div className="App">
        {/* 配置导航菜单 */}
        {/* <Link to="/home">首页</Link> */}
        {/* <Link to="/citylist">找房</Link> */}
        {/* 配置路由 */}
        <Switch>
          <Route path="/home" component={Home}></Route>
          <Route path="/citylist" component={CityList} />
          <Route path="/map" component={Map} />

          {/* 房源详情的路由规则： */}
          <Route path="/detail/:id" component={HouseDetail} />
          <Route path="/login" component={Login} />
          <Route path="/registe" component={Registe} />

          <Route path="/" exact render={() => <Redirect to="/home" />} />
          {/* 配置登录后，才能访问的页面 */}
          <AuthRoute exact path="/rent" component={Rent} />
          <AuthRoute path="/rent/add" component={RentAdd} />
          <AuthRoute path="/search" component={RentSearch} />
          <AuthRoute path="/favorites" component={Favorites} />
          <AuthRoute path="/modifyuserinfo" component={ModifyUserInfo} />

        </Switch>
      </div>
    </Suspense>
  )
}

export default App